H5+CSS3 罗小黑动画

• 概要

  css3-animation-steps()函数 + Sprite（雪碧图）让萌萌的小黑动起来；
  html5-canvas 画一个逗喵神器。

• 难点

  实现纯canvas绘制以指定坐标为原点旋转指定角度的椭圆；
  椭圆与曲线活动轨迹磨合调整，多canvas整合；

• 链接
  关于本人使用steps()灵感来源于京东618的这篇技术贴，里面大致阐述了steps原理，网上还有更透彻的讲解，感兴趣的童鞋可以查阅;
  演示地址：点我；
  demo源码：github传送门；

• 主要源码

☞ css片段：

.xiaohei {
	width: 350px;
	height: 200px;
	background: url(xx.png) no-repeat 0 0;
	animation: toleft 2s infinite steps(11, end);
	-moz-animation: toleft 1.5s infinite steps(11);
	-webkit-animation: toleft 2s infinite steps(11);
	z-index: -1;
}

@keyframes toleft {
	/*0% {background-position:0;}*/
	100%{ background-position: -4180px 0px;}
}
@-webkit-keyframes toleft {
	100%{ background-position: -4180px 0px;}
}
@-moz-keyframes toleft {
	100% {background-position: -4180px 0;}
}

☞ js片段：

var h = 30, // 高度（y轴坐标）
	arr = [5,7,8,9,10,20,30,50,1,-50,-30,-20,-10,-8,-6,-5,-3], // 草头旋转角度数组
	//arrDown = [-6,-7,-8,-9,-10,-20,-30,-50,1,50,30,20,10,8,6,5,4], // 草头下至上旋转角度数组
	i = 0, // 数组下标
	flag = true, // 切换标识
	timer = null; // 定时器

// 绘制椭圆（草头）
function drawOval(ctx, h, neg) {
	ctx.clearRect(0,0,200,200);//清除画布上的指定区域
	ctx.beginPath();
	
	ctx.save();
	ctx.translate(16,(h-i/8)+8); // 垂直变化
	ctx.rotate(Math.PI/arr[i]*neg); // 旋转角度
	ctx.scale(1,1/2); // 绘制椭圆
	ctx.arc(0,0,15,0,Math.PI*2);
	ctx.fill(); // 填充
	ctx.stroke();
	ctx.restore();

	i++; // 数组遍历
}

// 贝塞尔曲线（草杆）绘制
function drawLine(h) {
	context.clearRect(0,0,200,200);//清除画布上的指定区域
	context.beginPath();
	context.moveTo(20,h+5); // 起点
	context.bezierCurveTo(80,100,120,100,200,100); // 
	context.stroke();
	return false;
}

// 绘制函数
function load(v) {
	clearInterval(timer);
	timer = setInterval(function(){
		if(h===150) {flag = false; i = 0;} // 切换条件
		if(h===30) {flag = true; i = 0;}

		if(flag) {
			h = ++h;
			(h%8 == 0) && drawOval(context1, h, 1);
		} else {
			h = --h;
			(h%8 == 0) && drawOval(context1, h, -1);
		}
		drawLine(h);

		context.drawImage(canvas1,0,0); // 合并多画布
	}, v);
}